{{>header}}

{{#section 'style'}}
    <link rel="stylesheet" href="/stylesheets/github-markdown.css">
{{/section}}
<div class="article main" id="article">
    <ul class="list">
        <li>
            <div><b>{{post.title}}</b></div>

            {{#if loginUser}}
                <div>

                    {{#if isAuthor}}
                        <a href="/article/edit/{{post._id}}">编辑</a> | <spaen class="spantoa delPost">删除</spaen> |
                    {{else}}
                        {{#if canReprint}}
                            <a href="/article/reprint/{{post._id}}">转载</a> |
                        {{/if}}
                    {{/if}}

                    {{#if hasCollected}}
                        <span class="spantoa collect" action="de_collect">取消收藏</span>
                    {{else}}
                        <span class="spantoa collect" action="collect">收藏</span>
                    {{/if}}

                </div>

            {{/if}}


            <div class="info">
                作者：<a href="/user/{{post.author._id}}">{{post.author.name}}</a> | 时间：{{post.ago}} | 阅读：{{post.pv}} | 评论：{{post.comments.length}} | 转载：{{post.reprintUsers.length}}
            </div>

            {{#if post.tags}}
            <div class="tags">
                <span>标签：</span>
                {{#each post.tags}}
                <a href="/tags/{{.}}" class="tag">{{.}}</a>
                {{/each}}
            </div>
            {{/if}}

            <div class="intro">简介：{{post.intro}}</div>

            <div class="content markdown-body">{{{post.contentHTML}}}</div>

            {{#if post.reprintFrom}}
             <div>转载自：<a href="{{post.origin}}">{{post.origin}}</a></div>
            {{/if}}
        </li>
    </ul>

    <p class="commentsListTitle">评论列表：</p>

    {{> comments }}

    {{#if loginUser}}
    <form class="commentForm" id="commentForm" action="/comment/{{post._id}}/reply/{{post._id}}" method="post">
        <div class="title">发表评论：</div>
        <textarea name="content"></textarea>
        <br>
        <input type="submit" value="评论"/><span class="errorMsg"></span>
    </form>
    {{/if}}

</div>

{{>articleSide}}

{{#section 'script'}}
    <script src="/javascripts/lib/handlebars.min.js"></script>
    <script>
        $(function(){
            var postId='{{post._id}}';
            var loginUser={
                _id:'{{loginUser._id}}',
                name:'{{loginUser.name}}',
                avatar:'{{loginUser.avatar}}',
                email:'{{loginUser.email}}'
            };
            var limit=[{{postCharacterLengthLimit.comment}}];
            console.log('loginUser:',loginUser,postId);


            var $article=$('#article');

            //删除Post
            (function(){
                $article.on('click','.delPost',function(){
                    if(window.confirm('你确定要删除此话题吗？')){
                        $.ajax({
                            url:'/article/remove/{{post._id}}',
                            type:'DELETE',
                            success:function(ret){
                                window.location='/';
                                if(200!=ret.code)this.error(ret.msg);
                            },
                            error:function (err) {
                                console.error('删除话题错误：',err);
                            }
                        });
                    }
                });
            })();

            //收藏/取消收藏
            (function(){
                $article.on('click','.collect',function(){
                    var $this=$(this);
                    $.ajax({
                        url:'/article/collect/{{post._id}}',
                        type:'POST',
                        data:{
                            action:$this.attr('action')
                        },
                        success:function(ret){
                            if(200==ret.code){
                                if('collect'==ret.action){
                                    $this.text('取消收藏').attr('action','de_collect');
                                }else if('de_collect'==ret.action){
                                    $this.text('收藏').attr('action','collect');
                                }
                            }else{
                                this.error(ret.msg);
                            }
                        },
                        error:function(err){
                            console.error('收藏/取消收藏失败：\n',err);
                        }
                    });
                });
            })();

            //赞/取消
            (function(){
                $article.on('click','.up',function(){
                    var $this=$(this);
                    var commentId=$this.closest('li').attr('id');
                    $.ajax({
                        url:'/comment/up/'+commentId,
                        type:'POST',
                        data:{
                            action:$this.attr('action')
                        },
                        success:function(ret){
                            if(200==ret.code){
                                var ups=$this.attr('ups');
                                console.log('ups:',ups);
                                if('up'==ret.action){
                                    $this.attr('action','de_up').find('i').text('取消赞');
                                    if(ups){
                                        ups++;
                                        $this.attr('ups',ups).find('em').text('('+ups+')');
                                    }else{
                                        $this.attr('ups',1).append('<em>(1)</em>');
                                    }
                                }else if('de_up'==ret.action){
                                    $this.attr('action','up').find('i').text('赞');
                                    ups--;
                                    $this.attr('ups',ups).find('em').text('('+ups+')');
                                }
                            }else{
                                this.error(ret.msg);
                            }
                        },
                        error:function(err){
                            console.error('赞/取消赞失败：\n',err);
                        }
                    });
                });
            })();

            //评论Post
            (function(){
                $article.on('submit','.commentForm',function(){
                    var content=$(this).find('textarea').val();
                    if(!content || content.length<limit[0] || content.length>limit[1]){
                        $(this).find('.errorMsg').text(['评论内容长度非法(',limit[0],'~',limit[1],')'].join('')).show();
                        return false;
                    }
                });
            })();

            //回复评论
            (function(){
                //显示回复输入框
                $article.on('click','.reply',function(){
                    var $li=$(this).closest('li'),commentId=$li.attr('id');
                    $li.find('dd').append('<form class="commentForm" action="/comment/'+postId+'/at/'+commentId+'" method="post"><textarea name="content">@'+$li.find('dt').attr('username')+' </textarea><input type="hidden" name="atUserId" value="'+$li.find('dt').attr('userid')+'"/><input type="submit" value="回复"/><span class="errorMsg"></span></form>');
                });
            })();


            //删除评论
            (function(){
                $article.on('click','.del',function(){
                    if(window.confirm('你确定要删除此评论吗？')){
                        var $li=$(this).closest('li');
                        $.ajax({
                            url:'/comment/remove/'+$li.attr('id'),
                            success:function(ret){
                                console.log(ret);
                                if(200==ret.code){
                                    $li.remove();
                                }else{
                                    this.error(ret.msg);
                                }
                            },
                            error:function(err){
                                console.error(err);
                            }
                        });
                    }
                });
            })();
        });
    </script>
{{/section}}